<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>

<script>
	window.onload=function(){
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle='#ff0000';
		ctx.fillStyle='#0000ff';
		ctx.strokeRect(100,100,300,300);
		ctx.fillRect(200,200,100,100);	
		
		var color=new Array('#ff0000', '#00ff00', '#0000ff',
					        '#ffff00', '#00ffff', '#ff00ff',
					        '#000000', '#212121', '#cccccc');
		var j=0;
		for(i=10; i<500; i=i+60){
			ctx.fillStyle=color[j];
			ctx.fillRect(i, 450, 55,55);
			j++;
		}
	}


		
</script>

</head>
<body>
	<canvas id='mycanvas' width='600px' height='500px'>
	</canvas>
	
</body>
</html>